import { Button, Divider } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { registerEvent } from '@/pages/center/workflow/utils/HandleUtils';
import styles from '../index.less';
import { GForm, GTable } from 'geminis-react';

export default (props: any) => {
  const approveForm = useRef<any>();
  const [loading, setLoading] = useState(false);

  const result = [
    { label: '同意', value: 'agree' },
    { label: '拒绝', value: 'disagree' },
    { label: '返回修改', value: 'return' },
  ];

  const submit = () => {
    setLoading(true);
    approveForm.current
      .getForm()
      .validate()
      .then(() => {
        window.frames['form-content'].postMessage({
          cmd: 'submit',
          params: null,
        });
      });
  };

  const handleFormSchema = {
    fields: {
      type: 'object',
      properties: {
        result: {
          type: 'string',
          title: '审批意见',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Radio.Group',
          enum: result,
        },
        nextTaskKey: {
          type: 'string',
          title: '返回节点',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'GSelect',
          'x-display': 'none',
          'x-component-props': {
            url:
              '/api/workflow/tasks/' +
              props.location.query.taskId +
              '/canReturn',
            data: {
              valueField: 'taskDefinitionKey',
            },
          },
          'x-reactions': {
            dependencies: [
              {
                property: 'value',
                type: 'string',
                source: 'result',
                name: 'result',
              },
            ],
            fulfill: {
              state: {
                visible: "{{$deps.result === 'return'}}",
              },
            },
          },
        },
        comment: {
          type: 'string',
          title: '详细意见',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input.TextArea',
        },
      },
    },
  };

  const history = {
    title: () => '处理过程',
    size: 'middle',
    rowSelection: null,
    pagination: false,
    data: {
      url:
        '/api/workflow/history/processes/' +
        props.location.query.processInstanceId +
        '/tasks',
      method: 'get',
    },
    columns: [
      {
        title: '活动',
        dataIndex: 'taskDefinitionName',
      },
      {
        title: '处理人',
        dataIndex: 'assignee',
        render: (assignee: any) => assignee?.split('/')[0],
      },
      {
        title: '处理时间',
        dataIndex: 'endTime',
        render: (endTime: any) =>
          endTime && window.moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        title: '处理结果',
        dataIndex: 'approveResult',
        render: (approveResult: any) =>
          result.find((value) => approveResult?.result === value.value)?.label,
      },
      {
        title: '处理意见',
        dataIndex: 'approveResult',
        render: (approveResult: any) => approveResult?.comment,
      },
    ],
  };

  useEffect(() => {
    registerEvent(
      (params: any) => '/api/workflow/tasks/complete',
      'put',
      () => {
        return {
          ...approveForm.current.getForm().values,
          processInstanceId: props.location.query.processInstanceId,
          taskInstanceId: props.location.query.taskId,
        };
      },
      setLoading,
    );
  }, []);

  return (
    <div className={styles.content}>
      <h3 className={styles.title}>
        {props.location.query.processDefinitionName} -
        {props.location.query.taskDefinitionName}
      </h3>
      <iframe
        id="form-content"
        name="form-content"
        src={atob(props.location.query.formUrl)}
      />
      <Divider />
      <GForm ref={approveForm} schema={handleFormSchema} />
      <div className={styles.submit}>
        <Button type="primary" loading={loading} onClick={submit}>
          提交
        </Button>
      </div>
      <Divider />
      <GTable schema={history} />
    </div>
  );
};
